{% extends "base.html" %}
{% load i18n %}
{% block head %}
	<title>{%trans "校园帮帮团" %}</title>
	{{ block.super }}
    <link href="{{ STATIC_URL }}css/common.css" rel="stylesheet">
{% endblock %}

{% block content %}
    <div class="page-content submit-page-content" style="padding: 40px 0;">
        <div class="page-content-wrapper">
            <div class="page-title">
                个人中心
            </div>

            <form class="bk-form" id="validate_form">
                {% for us in user %}
                <div id="validate_form">
                    <div class="division-box">
                        <div class="division-title">Personal Center</div>
                    </div>
                    <div class="container-fluid">
                        <div class="row">
                            <div style="width:45%;float:left;">
                                <div class="bk-form-item is-required">
                                    <label class="bk-label" style="width:225px;">用户名</label>
                                    <div class="bk-form-content" style="margin-left:225px;">
                                        <input type="text" class="bk-form-input" placeholder="未知" value="{{ us.compus_user }}"
                                               id="compus_user" name="compus_user" data-type="count" disabled="disabled">
                                    </div>
                                </div>
                                <div class="bk-form-item is-required">
                                    <label class="bk-label" style="width:225px;">性别</label>
                                    <div class="bk-form-content" style="margin-left:225px;">
                                        <select name="user_sex" id="user_sex"
                                                value="{{ us.user_sex }}" class="bk-form-select">
                                            <option value="1">男</option>
                                            <option value="0">女</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="bk-form-item is-required">
                                    <label class="bk-label" style="width:225px;">联系电话</label>
                                    <div class="bk-form-content" style="margin-left:225px;">
                                        <input type="text" class="bk-form-input" placeholder="请输入您的联系电话"
                                               value="{{ us.user_phone }}" id="user_phone" name="user_phone" data-type="count">
                                    </div>
                                </div>
                            </div>
                            <div style="width:45%;float:left;">
                                <div class="bk-form-item is-required">
                                    <label class="bk-label" style="width:225px;">电子邮箱</label>
                                    <div class="bk-form-content" style="margin-left:225px;">
                                        <input type="text" class="bk-form-input" placeholder="请输入您的e-mail"
                                               value="{{ us.user_email }}" id="user_email" name="user_email" data-type="count">
                                    </div>
                                </div>
                                <div class="bk-form-item">
                                    <label class="bk-label" style="width:225px;">个人备注</label>
                                    <div class="bk-form-content" style="margin-left:225px;">
                                        <textarea class="bk-form-textarea ignore" placeholder="请输入备注"
                                                  id="user_remarks" name="user_remarks">{{ us.user_remarks }}</textarea>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="container-fluid" style="margin-top: 20px">
                        <div class="row">
                            <div style="width:45%;float:left;">
                                <div class="bk-form-item">
                                    <div class="bk-form-content tl" style="margin-left:225px;">
                                        <button type="button" class="bk-button bk-primary" onclick="editUserInfo()" title="提交" id="submit">
                                        提交
                                        </button>
                                        <button type="button" class="bk-button bk-default" onclick="jump_index()" title="取消" id="cancel">
                                        取消
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </form>
        </div>
    </div>
{% endblock %}

{% block extra_block %}
<script>
    var language = {
        search: "{% trans '搜索：' %}",
        lengthMenu: "{% trans '每页显示 _MENU_ 记录' %}",
        zeroRecords: "{% trans '没找到相应的数据！' %}",
        info: "{% trans '分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条' %}",
        infoEmpty: "{% trans '暂无数据！' %}",
        infoFiltered: "{% trans '(从 _MAX_ 条数据中搜索)' %}",
        paginate: {
            first: "{% trans '首页' %}",
            last: "{% trans '尾页' %}",
            previous: "{% trans '上一页' %}",
            next: "{% trans '下一页' %}",
        }
    }

    $('#validate_form').validate({
        ignore: '.ignore',
        errorElement: 'div', //错误信息的容器
        errorClass: 'is-danger',
        errorPlacement: function (error, element) {
            error.addClass('bk-form-tip').insertAfter(element)
        },
        validClass: "bk-valid",
        //验证规则
        rules: {
            user_phone: {
                required: true,
            },
        },
        //错误提示信息
        messages: {
            user_phone: "<p class='bk-tip-text'>联系电话为必填项！</p>  ",
        }
    });

    function jump_index(){
     window.location.href="{{ SITE_URL }}";
    }

    function editUserInfo() {
        if ($('#validate_form').valid()) {
            $.ajax({
                url: '{{ SITE_URL }}edit_user_info/',
                method: 'post',
                data: {
                    'user_sex': $("#user_sex").val(),
                    'user_phone': $('#user_phone').val(),
                    'user_remarks': $('#user_remarks').val(),
                    'user_email': $('#user_email').val(),
                    'csrfmiddlewaretoken': "{{ csrf_token }}",
                },
                success: function (response) {
                    if (response['result']) {
                        new bkMessage({
                            message: response['message'],
                            theme: 'success'
                        })
                        jump_index()
                    } else {
                        // 失败处理
                        new bkMessage({
                            message: response['message'],
                            theme: 'error',
                            delay: 3000
                        });
                    }
                }
            })
        }
    }
</script>
{% endblock %}